<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="layui/css/layui.css">
	</head>
	<body>

<h1 align="center">笔记</h1>
<h2>
	使用表单必须要用js引入	
		layui.use(['form'], function() {
		var form = layui.form;
		}
	
	表单的layui-input-inline表示行内元素
		layui-input-block表示独占一行
		<br>
		required lay-verify="required" lay-reqText="请输入标题" 配合起用，表示必填且有提示信息
		lay-vertify="值"
					required 必填
					 phone 手机号
					 email 邮箱
					 number数字
					 date 日期
					 identity身份证 多个用|隔开  如：required|phone
					 
					 
					 <br />
					 
		绑定一个button提交事件 lay-submit lay-filter="任意命名"
		js监听button事件
			form.on('submit(任意命名)', function(data) {
				//data.field可以获取表单的所有值，不用手动获取
			console.log(data.field)
			}
			
		绑定一个select下拉事件 	lay-select lay-filter="任意命名"
		js监听button事件
			form.on('select(任意命名)', function(data) {
				//可以获取当前下拉框选中的值
			console.log(data.value)
			}
			
			
		******	如果有时候是ajax动态添加的元素追加到页面，需要在方法中手动刷新，否则没有效果
			form.render('select')//表示手动刷新select标签里面的元素
			
			
			方式1：给form表单赋值 eg：form表单回显数据
				form.val("form表单中lay-filter的值",obj.data)即可
			方式2：给表单赋值
				form.val("formTest", { //formTest  即form表单中lay-filter="" 对应的值
				  "username": "贤心" // "name": "value"
				  ,"sex": "女"
				  ,"auth": 3
				  ,"check[write]": true
				  ,"open": false
				  ,"desc": "我爱layui"
				});
			
			
</h2>


		<form class="layui-form layui-form-pane" lay-filter="form">
			<div class="layui-form-item">
				<label class="layui-form-label">输入框</label>
				<div class="layui-input-inline">
					<input type="text" name="title" required lay-verify="required" lay-reqText="请输入标题" placeholder="请输入标题"  class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
			      <label class="layui-form-label">验证日期</label>
			      <div class="layui-input-inline">
			        <input type="text" name="date" id="date" required  readonly lay-verify="required|date" placeholder="yyyy-MM-dd"  class="layui-input">
			      </div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">密码框</label>
				<div class="layui-input-inline">
					<input type="password" name="password" required lay-verify="required" placeholder="请输入密码" class="layui-input">
				</div>
				<div class="layui-form-mid layui-word-aux">辅助文字</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">输入框</label>
				<div class="layui-input-inline">
					<input type="text" name="phone" required lay-verify="required" placeholder="请输入手机号码"  class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">选择框</label>
				<div class="layui-input-inline">
					<select name="city" lay-verify="required" lay-select lay-filter="sele" >
						<option value=""></option>
						<option value="0">北京</option>
						<option value="1">上海</option>
						<option value="2">广州</option>
						<option value="3">深圳</option>
						<option value="4">杭州</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">复选框</label>
				<div class="layui-input-block">
					<input type="checkbox" name="write" title="写作">
					<input type="checkbox" name="read" title="阅读" >
					<input type="checkbox" name="dai" title="发呆">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">单选框</label>
				<div class="layui-input-block">
					<input type="radio" name="sex" value="男" title="男">
					<input type="radio" name="sex" value="女" title="女" checked>
				</div>
			</div>
			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label">文本域</label>
				<div class="layui-input-block">
					<textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="w">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>

			
	</body>
</html>
<script src="layui/layui.js"></script>
<script>
	layui.use(['form',"laydate"], function() {
		var form = layui.form;
		var laydate = layui.laydate;
		 //日期  type: 'time'  可以选择时间, 如果是datetime 可以选择年月日时分秒如果不写type默认是年月日
		  laydate.render({
		    elem: '#date'
		  });

		//监听提交 在提交按钮必须设置 lay-submit lay-filter="formDemo" 两个属性,好监听
		//data可以拿到表单的所有数据
		form.on('submit(w)', function(data) {
			console.log(data.field)
			return false;	//return false可以禁止页面刷新,变成无刷新提交方式,true就是正常刷新页面并提交
		});
		
		//监听select
		form.on('select(sele)',function(data){
			console.log(data.value)
		})
	});
</script>
